<template>
  <div
    class="login-container"
    style="
      width: 100vw;
      height: 100vh;
      background: url('img/ffff.jpg') no-repeat;
      background-size: 100% 100%;
    "
  >
    <div class="bc">
      <div class="main">
        <el-form
          label-width="60px"
          :model="form"
          status-icon
          :rules="rules"
          ref="f1"
          class="demo-ruleForm"
        >
          <span
            style="
              display: inline-block;
              margin-bottom: 20px;
              margin-left: 110px;
            "
            >欢迎登录</span
          >
          <el-form-item class="c1" label="账号" prop="phone">
            <el-input v-model="form.phone" placeholder="请输入账号"></el-input>
            <br />
          </el-form-item>

          <el-form-item class="c1" label="密码" prop="password">
            <el-input
              v-model="form.password"
              placeholder="请输入密码"
              show-password
            ></el-input>
          </el-form-item>
          <!-- 验证码 -->

          <el-form-item class="c1" label="验证" prop="yzm">
            <el-input
              style="width: 140px"
              v-model="form.code"
              placeholder="请输入验证码"
            ></el-input>
          </el-form-item>
          <span class="s-canvas" @click="changeCode">
            <canvas
              id="s-canvas"
              :width="contentWidth"
              :height="contentHeight"
            ></canvas>
          </span>
          <el-form-item>
            <span
              style="
                font-size: 14px;
                position: relative;
                font-weight: 600;
                top: -30px;
                left: -80px;
              "
              >还没有账号？前往<a href="/register" style="color: #007aff"
                >注册</a
              ></span
            >
            <el-button
              @click="go"
              style="
                position: absolute;
                right: 36%;
                width: 100px;
                font-size: 18px;
              "
              type="primary"
              round
              >登录</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    identifyCodes: {
      //验证码从该字段中抽取生成
      type: String,
      default: "1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ", //这里可以随便输数字字母
    },
    fontSizeMin: {
      // 字体最小值
      type: Number,
      default: 25,
    },
    fontSizeMax: {
      // 字体最大值
      type: Number,
      default: 35,
    },
    backgroundColorMin: {
      // 验证码图片背景色最小值
      type: Number,
      default: 200,
    },
    backgroundColorMax: {
      // 验证码图片背景色最大值
      type: Number,
      default: 220,
    },
    dotColorMin: {
      // 背景干扰点最小值
      type: Number,
      default: 60,
    },
    dotColorMax: {
      // 背景干扰点最大值
      type: Number,
      default: 120,
    },
    contentWidth: {
      //容器宽度
      type: Number,
      default: 100,
    },
    contentHeight: {
      //容器高度
      type: Number,
      default: 44,
    },
  },
  watch: {
    identifyCode() {
      this.drawPic();
    },
  },
  mounted() {
    this.drawPic();
    this.makeCode(this.identifyCodes, 4);
    if (window.location.href.indexOf("#reloaded") == -1) {
      window.location.href = window.location.href + "#reloaded";
      window.location.reload();
    }
  },

  methods: {
    // 生成一个随机数
    randomNum(min, max) {
      return Math.floor(Math.random() * (max - min) + min);
    },
    // 生成一个随机的颜色
    randomColor(min, max) {
      let r = this.randomNum(min, max);
      let g = this.randomNum(min, max);
      let b = this.randomNum(min, max);
      return "rgb(" + r + "," + g + "," + b + ")";
    },
    drawPic() {
      let canvas = document.getElementById("s-canvas");
      let ctx = canvas.getContext("2d");
      ctx.textBaseline = "bottom";
      // 绘制背景
      ctx.fillStyle = this.randomColor(
        this.backgroundColorMin,
        this.backgroundColorMax
      );
      ctx.fillRect(0, 0, this.contentWidth, this.contentHeight);
      // 绘制文字
      for (let i = 0; i < this.identifyCode.length; i++) {
        this.drawText(ctx, this.identifyCode[i], i);
      }
      this.drawLine(ctx);
      this.drawDot(ctx);
    },
    drawText(ctx, txt, i) {
      ctx.fillStyle = this.randomColor(50, 160); //随机生成字体颜色
      ctx.font =
        this.randomNum(this.fontSizeMin, this.fontSizeMax) + "px SimHei"; //随机生成字体大小
      let x = (i + 1) * (this.contentWidth / (this.identifyCode.length + 1));
      let y = this.randomNum(this.fontSizeMax, this.contentHeight - 5);
      var deg = this.randomNum(-30, 30);
      // 修改坐标原点和旋转角度
      ctx.translate(x, y);
      ctx.rotate((deg * Math.PI) / 180);
      ctx.fillText(txt, 0, 0);
      // 恢复坐标原点和旋转角度
      ctx.rotate((-deg * Math.PI) / 180);
      ctx.translate(-x, -y);
    },
    drawLine(ctx) {
      // 绘制干扰线
      for (let i = 0; i < 4; i++) {
        ctx.strokeStyle = this.randomColor(100, 200);
        ctx.beginPath();
        ctx.moveTo(
          this.randomNum(0, this.contentWidth),
          this.randomNum(0, this.contentHeight)
        );
        ctx.lineTo(
          this.randomNum(0, this.contentWidth),
          this.randomNum(0, this.contentHeight)
        );
        ctx.stroke();
      }
    },
    drawDot(ctx) {
      // 绘制干扰点
      for (let i = 0; i < 30; i++) {
        ctx.fillStyle = this.randomColor(0, 255);
        ctx.beginPath();
        ctx.arc(
          this.randomNum(0, this.contentWidth),
          this.randomNum(0, this.contentHeight),
          1,
          0,
          2 * Math.PI
        );
        ctx.fill();
      }
    },
    /*切换验证码start*/
    changeCode() {
      this.identifyCode = "";
      this.makeCode(this.identifyCodes, 4);
    },
    makeCode(e, n) {
      for (let i = 0; i < n; i++) {
        this.identifyCode += e[this.randomNum(0, e.length)];
      }
      this.$emit("update:changeCode", this.identifyCode);
    },
    randomNum(min, max) {
      return Math.floor(Math.random() * (max - min) + min);
    },
    /*切换验证码end*/

    go() {
      const params = `phone=${this.form.phone}&password=${this.form.password}`;
      const url = `/login`;
      this.axios.post(url, params).then(res => {
        console.log(res);
        if (res.data.code == 200) {
          //alert("登录成功");
          this.$message.success("登录成功");
          this.$router.push("/");
          //将用户名存到vuex
          this.$store.commit("loginok", this.form.phone);
        } else {
          this.$message.error("登录失败,请重新检查");
          //alert("登录失败,请重新检查");
        }
      });
    },
  },
  data() {
    return {
      identifyCode: "", //当前生成的验证码
      form: {
        code: "", //text框输入的验证码
        phone: "",
        pwd: "",
      },
      rules: {
        yzm: [
          {
            pattern: /^\w{4}$/,
            message: "请检查密码是否正确",
            trigger: "blur",
          },
        ],
        phone: [
          { required: true, message: "账号不能为空", trigger: "blur" },
          {
            pattern: /^1[3-9]\d{9}$/,
            message: "手机号为11位数",
            trigger: "blur",
          },
        ],
        pwd: [{ required: true, message: "密码不能为空", trigger: "blur" }],
      },
    };
  },
};
</script>
<style>
.c1 .el-form-item__label {
  color: white;
}
</style>
<style lang="scss" scoped>
.login-container {
  height: 100%;
  width: 100%;
  overflow: hidden;
  background-color: #050608;
  user-select: none;
}

.s-canvas {
  position: absolute;
  top: 180px;
  left: 105px;
}
.bc {
  width: 500px;
  height: 400px;

  background-color: transparent;

  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  top: 0;
  margin: auto;
}

.main {
  width: 300px;
  height: 300px;
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  top: 0;
  margin: auto;

  span {
    color: white;
    margin-left: 32%;
    font-size: 30px;
    font-weight: bold;
  }
}
</style>
